<template>
  <div>
    我是子组件Message <br />父组件给我的title是:{{ title }}

    <button @click="sendMessageToMyF">点我，发数据给父组件</button>
    <button @click="sendMessageToBro">点我，发送数据给我兄弟</button>
  </div>
</template>
<script>
export default {
  props: {
    //   定义好这个属性，让父组件通过这个属性给我数据，我就拿到属性了
    title: {
      // 规定这个属性的值是字符串类型的，默认为空
      type: String,
      default: "",
    },
  },
  // 这些数据都是每个组件自己才能访问的或者使用的，想要别的组件也可以使用，需要组件通信
  data() {
    return {
      // 比如这里我想把这个数据共享给父组件
      childCount: 0,
    };
  },
  methods: {
    sendMessageToMyF() {
      // 子组件定义好一个发射事件，顺便把数据传出去,
      // 第一个参数:事件名你可以随便起名
      // 第二个参数: 你要发出去的数据
      this.$emit("sendChildCount", this.childCount);
    },
    sendMessageToBro() {
      // 通过this.$bus.$emit发事件，顺便把数据传出去,
      this.$bus.$emit("sendChildCountToMyBro", this.childCount);
    },
  },
};
</script>
